<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Demo DatePicker</title>
  <link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/mdDateTimePicker.min.css">
</head>

<body>
  <section>
    <h1>Date dialog</h1>
    <button type="button" id="trigger">Default</button>
    <button type="button" id="trigger2">With Init</button>
    <button type="button" id="trigger3">Portrait Mode</button>
  </section>
  <section>
    This input is updated with x's value on clicking ok
    <input type="text" id="test1" value="">
  </section>
  <section>
    <h1>Time dialog</h1>
    <button type="button" id="trigger4">Default</button>
    <button type="button" id="trigger5">Portrait Mode</button>
    <button type="button" id="trigger6">24 Hour Mode</button>
  </section>
  <section>
    <h1>Language Selector</h1>
    <select id="language">
      <option value="en">English</option>
      <option value="de">German</option>
      <option value="fr">French</option>
      <option value="zh">Zhongguo</option>
      <option value="af">Afrikaans</option>
    </select>
  </section>
  <script src="js/ux/moment.min.js"></script>
  <!--load locales i.e. german(deutsch), french, etc.-->
  <script src="js/ux/lang/zh-cn.js"></script>
  <script src="js/scroll-into-view-if-needed.min.js"></script>
  <script src="js/ux/draggabilly.pkgd.min.js"></script>
  <script src="js/ux/mdDateTimePicker.min.js"></script>
  <script type="text/javascript">
  (function() {
    // load language from hash
    var hash = location.hash.replace('#', '');
    var locale = hash ? hash : 'en';
    moment.locale(locale);
    // rest of the demo logic
    var x = new mdDateTimePicker.default({
      type: 'date'
    });
    var y = new mdDateTimePicker.default({
      type: 'date',
      init: moment('2016-02-29', 'YYYY-MM-DD')
    });
    var z = new mdDateTimePicker.default({
      type: 'date',
      init: moment('2016-03-3', 'YYYY-MM-DD'),
      orientation: 'PORTRAIT'
    });
    document.getElementById('trigger').addEventListener('click', function() {
      x.toggle();
    });
    document.getElementById('trigger2').addEventListener('click', function() {
      y.toggle();
    });
    document.getElementById('trigger3').addEventListener('click', function() {
      z.toggle();
    });
    var a = new mdDateTimePicker.default({
      type: 'time'
    });
    var b = new mdDateTimePicker.default({
      type: 'time',
      init: moment('10:5 PM', 'h:m A'),
      orientation: 'PORTRAIT'
    });
    var c = new mdDateTimePicker.default({
      type: 'time',
      init: moment('22:0', 'H:m'),
      mode: true,
      orientation: 'PORTRAIT'
    });
    document.getElementById('trigger4').addEventListener('click', function() {
      a.toggle();
    });
    document.getElementById('trigger5').addEventListener('click', function() {
      b.toggle();
    });
    document.getElementById('trigger6').addEventListener('click', function() {
      c.toggle();
    });
    // dispatch event test
    x.trigger = document.getElementById('test1');
    document.getElementById('test1').addEventListener('onOk', function() {
      this.value = x.time.toString();
    });
    // language selector
    var language = document.getElementById('language')
    language.addEventListener('change', function() {
      // set lang
      location.hash = language.options[language.options.selectedIndex].value;
      // reload
      location.reload()
    });
  }).call(this);
  </script>
</body>

</html>
